<template>
	<view class="wrap">
		<view class="popup-mask" v-show="showhide == false" @click="hidePopup"></view>
		<view class="popup-wrapper" v-show="showhide == false">
			<view class="popup-container">
				<view class="popup-header">
					<view class="popup-title">登录结果</view>
					<view class="popup-close" @click="hidePopup">x</view>
				</view>
				<view class="popup-body">
					<view>你的账号存在异常情况，部分功能无法正常使用，如需解决问题，请联系客服</view>
				</view>
				<view class="popup-footer">
					<button class="popup-confirm" @click="hidePopup">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:["Showhide"],
	data(){
		return{
			// 将传过来的值进行判断
			showhide:this.Showhide
		}
	},
	methods: {
		hidePopup() {
			this.showhide = true;
		}
	}
};
</script>

<style>
	.wrap {
		text-align: center;
	}

	.btn {
		padding: 15rpx 30rpx;
		font-size: 16rpx;
		color: #fff;
		background-color: #409EFF;
		border-radius: 4rpx;
		cursor: pointer;
	}

	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}

	.popup-wrapper {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
	}

	.popup-container {
		width: 500rpx;
		background-color: #fff;
		border-radius: 4rpx;
	}

	.popup-header {
		padding: 20rpx;
		border-bottom: 1rpx solid #ccc;
		text-align: center;
		position: relative;
	}

	.popup-title {
		margin: 0;
	}

	.popup-close {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		font-size: 20rpx;
	}

	.popup-body {
		padding: 30rpx;
		height: 200rpx;
		text-align: left;
		font-size: 28rpx;
		color: #666;
	}

	.popup-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
	}

	.popup-cancel,
	.popup-confirm {
		padding: 0 60rpx;
		font-size: 16rpx;
		color: #fff;
		border-radius: 4rpx;
		cursor: pointer;
	}

	.popup-cancel {
		background-color: #999;
		margin-right: 10rpx;
	}

	.popup-confirm {
		background-color: #409EFF;
	}
</style>